<template>
  <div>
    <van-address-list :list="address" default-tag-text="默认" @add="show=true" @edit="edit"/>

    <!-- 新增 -->
    <van-dialog v-model="show" title="新增" show-cancel-button>
      <van-address-edit
        :show-area="false"
        @save="save"
      />
    </van-dialog>

     <!-- 编辑 -->
    <van-dialog v-model="show1" title="编译" show-cancel-button>
      <van-address-edit
        :show-area="false"
        @save="saveEdit"
        :address-info="editData"
      />
    </van-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["address"])
  },
  data() {
    return {
      show: false,
      show1: false,
      editData: {
        name: '',
        addressDetail: '',
        tel: '',
        id: ''
      }
    }
  },
  methods: {
    ...mapMutations(['Add_Address', 'Edit_Address']),
    save(content) {
      console.log(content);

      this.Add_Address({
        name: content.name,
        address: content.addressDetail,
        tel: content.tel,
        id: new Date().getTime().toString()
      })

      this.show = false
    },
    edit(item) {
      this.show1 = true
      console.log(item);
      this.editData = { ...item, addressDetail: item.address }
    },
    saveEdit(content) {
      let s = { ...content, address: content.addressDetail }
      console.log(s);
      this.Edit_Address(s)
      this.show1 = false
    }
  }
};
</script>